import React, { Component } from 'react';
import { Input, Select, Button, message } from 'antd';
import Showlist from './Showlist'
import axios from 'axios'
import './zs.css'

class Dianpuzhans extends Component {
  constructor(props) {
    super(props)
    this.state = {
      children: [],
      res: [],
      zhanshiArr: [],
      inputValue: '',
      type: '全部'
    }
  }
  //下拉框选择
  handleChange = (value) => {
    this.setState({
      type: value
    })
    console.log(`Selected: ${value}`);
  }
  //输入框输入
  inputChange = (e) => {
    this.setState({
      inputValue: e.target.value
    })
  }
  componentDidMount() {
    this.getSelect();
    this.getdiapuzs();
  }
  //获得店铺展示的数据
  getdiapuzs() {
    axios.get("/api/admin/shopView/page").then((res) => {
      if (res.status === 200) {
        // console.log(...res.data.data.list);
        this.setState({
          zhanshiArr: [...res.data.data.list],
          inputValue: '',
          type: '全部'
        }, () => {
          // console.log(this.state.zhanshiArr);
        })
      } else {
        console.log("出错了");
      }

    })
  }
  //获得下拉框的数据
  getSelect() {
    axios.get("/api/admin/shopView/shopGroup").then((res) => {
      this.setState({
        children: [...res.data.data]
      }, () => {
        const { Option } = Select;
        this.setState({
          res: this.state.children.map((item) => {
            return <Option key={item.shopGroup}>{item.shopGroup}</Option>
          })
        })
      })
    })
  }
  //搜索
  sousuo = () => {
    let data = new FormData()
    data.append("shopName", this.state.inputValue)
    data.append("shopGroup", this.state.type === '全部' ? '' : this.state.type)
    let config = {
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      },
    };
    axios.post("/api/admin/shopView/search", data, config).then((res) => {
      if (res.status === 200 && res.data.data.list.length > 0) {
        message
          .loading('查询中..', 1)
          .then(() => {
            message.success(' 查询成功', 2.5)
            this.setState({
              zhanshiArr: [...res.data.data.list]
            })
          })
      } else {
        message
          .loading('查询中..', 1)
          .then(() => {
            message.warning(' 无数据', 2.5)
          })
      }
    }).catch(err => {
      message
        .loading('查询中..', 1)
        .then(() => {
          message.error('后台数据错误', 2.5)
        })
    })
  }
  //重置
  reset = () => {
    this.getdiapuzs();
  }
  render() {
    let showArr = this.state.zhanshiArr.map(item => {
      return <Showlist
        shopName={item.shopName}
        shopCreateTime={item.shopCreateTime}
        shopLogo={item.shopLogo}
        shopMoney={item.shopMoney}
        shopTotalNumber={item.shopTotalNumber}
        key={item.shopName}
      ></Showlist>
    })
    return (
      <div className='content'>
        <div className='header'>
          <div className='zsinput'>
            <Input placeholder="请输入店铺名称"
              onInput={this.inputChange}
              value={this.state.inputValue}
            />
          </div>
          <div>
            店铺类型：
            <Select size={'large'}
              defaultValue="全部"
              value={this.state.type}
              onChange={this.handleChange}
              style={{ width: 200 }}>
              {this.state.res}
            </Select>
          </div>
          <div className='searchBtn'>
            <Button type="primary"
              danger
              onClick={this.sousuo}>
              搜索
           </Button>
            <Button onClick={this.reset}>
              重置
           </Button>
          </div>
        </div>
        {showArr}
      </div>
    );
  }
}

export default Dianpuzhans;